<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日历提醒</title>
    <link rel="stylesheet" type="text/css" href="../js/fullcalendar/fullcalendar.min.css"/>
    <link rel="stylesheet" type="text/css" href="../js/fullcalendar/fullcalendar.print.min.css"  media='print' />
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/moment.min.js"></script>
    <script type="text/javascript" src="../js/fullcalendar/fullcalendar.min.js"></script>
    <script type="text/javascript" src="../js/fullcalendar/locale-all.js"></script>
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
    <script>
        $(function(){
            $("#dialog-event").dialog({
                title: '添加事件',
                width: 400,
                height: 200,
                closed: true,
                cache: false,
                modal: true,
                buttons: [{
                    text: '保存',
                    handler: function () {
                        var eventData = {
                            title: $('#eventTitle').val(),
//                            start:'2016-12-20T09:20:20',
                            start: $("#eventStart").datetimebox('getValue'),
                            end: $("#eventEnd").datetimebox('getValue'),
//                            end:'2016-12-22T19:20:20',
                            content: $("#eventContent").val()
                        };
                        $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                        $('#calendar').fullCalendar('unselect');
                        $.post("../event/saveEvent",eventData,function(data){
                            alert('添加成功');
                        });
                    }
                }, {
                    text: '取消',
                    handler: function () {
                        $('#dialog-event').dialog("close");
                    }
                }]
            });
            $('#calendar').fullCalendar({
                //头部标签
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                //语言国际化
                locale:"zh-cn",
                //默认时间
                defaultDate: '2016-12-12',
                selectable: true,
                select: function() {
                   $("#dialog-event").dialog("open");
                },
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                events:'../event/listEvent'
            });
        });
    </script>
    <style>
        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }
        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id='calendar'></div>
<div id="dialog-event">
    事件标题:<input type="text" id="eventTitle" name="title"> <br/>
    事件内容: <textarea id="eventContent" name="content"></textarea><br/>
    开始时间: <input class="easyui-datetimebox" name="start" id="eventStart"
                data-options="required:true,showSeconds:false"/><br/>
    结束时间:<input class="easyui-datetimebox" name="end" id="eventEnd"
                data-options="required:true,showSeconds:false"/>
</div>
</body>
</html>